<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航运物流 - 承运商中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #3498db 100%);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }

        /* 海洋波浪背景动画 */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
            animation: oceanWave 15s ease-in-out infinite;
            z-index: -1;
        }

        @keyframes oceanWave {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-10px) rotate(1deg); }
            66% { transform: translateY(5px) rotate(-1deg); }
        }

        .container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 25px;
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            padding: 40px;
            margin: 50px auto;
            width: 90%;
            max-width: 1200px;
            position: relative;
            z-index: 1;
            animation: slideIn 0.8s ease-out;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(52, 152, 219, 0.2);
        }

        .logo h1 {
            color: #2c3e50;
            font-size: 28px;
            font-weight: 700;
            background: linear-gradient(135deg, #3498db, #1e3c72, #2980b9);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .user-info span {
            font-size: 16px;
            color: #34495e;
            font-weight: 600;
        }

        .logout-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .logout-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(231, 76, 60, 0.3);
        }

        .section {
            margin-bottom: 40px;
        }

        .section h2 {
            color: #2c3e50;
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section h2::before {
            content: '';
            display: block;
            width: 4px;
            height: 24px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            border-radius: 2px;
        }

        .form-container {
            background: rgba(236, 240, 241, 0.5);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-group {
            flex: 1;
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 10px;
            color: #34495e;
            font-weight: 600;
            font-size: 14px;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 14px 18px;
            border: 2px solid #ecf0f1;
            border-radius: 12px;
            font-size: 15px;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.9);
            color: #2c3e50;
        }

        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: #3498db;
            background: rgba(255, 255, 255, 1);
            box-shadow: 
                0 0 0 4px rgba(52, 152, 219, 0.1),
                inset 0 2px 4px rgba(0, 0, 0, 0.05);
            transform: translateY(-2px);
        }

        .submit-btn {
            padding: 14px 30px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
        }

        .submit-btn.loading {
            opacity: 0.8;
            pointer-events: none;
            background: linear-gradient(135deg, #bdc3c7, #95a5a6);
        }

        .shipment-list {
            background: rgba(236, 240, 241, 0.5);
            border-radius: 15px;
            padding: 25px;
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .shipment-list table {
            width: 100%;
            border-collapse: collapse;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            overflow: hidden;
        }

        .shipment-list th, .shipment-list td {
            padding: 15px 20px;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }

        .shipment-list th {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .shipment-list tr:last-child td {
            border-bottom: none;
        }

        .shipment-list tr:hover {
            background: rgba(52, 152, 219, 0.05);
        }

        .status {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status.pending {
            background: #fff3cd;
            color: #856404;
        }

        .status.in-transit {
            background: #cce7ff;
            color: #004085;
        }

        .status.delivered {
            background: #d4edda;
            color: #155724;
        }

        .message {
            padding: 15px 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            font-weight: 600;
            display: none;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .message.success {
            background: #d4edda;
            color: #155724;
            border: 2px solid #c3e6cb;
        }

        .message.error {
            background: #f8d7da;
            color: #721c24;
            border: 2px solid #f5c6cb;
        }

        .message.show {
            display: block;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
        }

        .action-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .view-btn {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
        }

        .update-btn {
            background: linear-gradient(135deg, #f39c12, #e67e22);
            color: white;
        }

        .view-btn:hover, .update-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 20px;
                margin: 20px auto;
            }

            .form-row {
                flex-direction: column;
            }

            .shipment-list th, .shipment-list td {
                padding: 10px 12px;
                font-size: 13px;
            }

            .action-buttons {
                flex-direction: column;
                gap: 5px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo">
                <h1>物流信息管理</h1>
            </div>
            <div class="user-info">
                <span id="carrierName">欢迎，承运商</span>
                <button class="logout-btn" onclick="logout()">退出登录</button>
            </div>
        </div>

        <div class="message" id="message"></div>

        <!-- 更新物流状态 -->
        <div class="section">
            <h2>更新物流状态</h2>
            <div class="form-container">
                <form id="updateStatusForm">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="updateShipmentId">物流ID</label>
                            <input type="number" id="updateShipmentId" name="shipmentId" placeholder="请输入物流ID" required>
                        </div>
                        <div class="form-group">
                            <label for="newStatus">新状态</label>
                            <select id="newStatus" name="status" required>
                                <option value="pending">待处理</option>
                                <option value="in-transit">运输中</option>
                                <option value="delivered">已送达</option>
                            </select>
                        </div>
                    </div>
                    <button type="submit" class="submit-btn" id="updateSubmitBtn">更新状态</button>
                </form>
            </div>
        </div>

        <!-- 物流信息列表 -->
        <div class="section">
            <h2>物流信息列表</h2>
            <div class="shipment-list">
                <table id="shipmentTable">
                    <thead>
                        <tr>
                            <th>物流ID</th>
                            <th>承运商ID</th>
                            <th>出发地</th>
                            <th>目的地</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="shipmentTableBody">
                        <!-- 物流信息将通过JavaScript动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // 获取URL参数
        function getUrlParams() {
            const params = new URLSearchParams(window.location.search);
            return {
                id: params.get('id'),
                name: params.get('name')
            };
        }

        // 初始化页面
        function init() {
            const params = getUrlParams();
            if (params.id) {
                document.getElementById('carrierName').textContent = `欢迎，承运商 ${params.id}`;
                loadShipments();
            } else {
                window.location.href = 'Carrier.html';
            }
        }

        // 显示消息
        function showMessage(message, type = 'success') {
            const messageEl = document.getElementById('message');
            messageEl.textContent = message;
            messageEl.className = `message ${type} show`;
            setTimeout(() => {
                messageEl.classList.remove('show');
            }, 3000);
        }

        // 更新物流状态
        document.getElementById('updateStatusForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const shipmentId = document.getElementById('updateShipmentId').value;
            const status = document.getElementById('newStatus').value;
            const submitBtn = document.getElementById('updateSubmitBtn');

            if (!shipmentId || !status) {
                showMessage('请填写所有必填字段', 'error');
                return;
            }

            submitBtn.classList.add('loading');
            submitBtn.textContent = '更新中...';

            try {
                const response = await fetch('http://172.21.136.104:8080/shipment/status', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        shipment_id: shipmentId,
                        status: status
                    })
                });

                const result = await response.json();

                if (result.code === '0') {
                    showMessage('物流状态更新成功！');
                    document.getElementById('updateStatusForm').reset();
                    loadShipments();
                } else {
                    showMessage(result.message || '更新失败', 'error');
                }
            } catch (error) {
                console.error('更新错误:', error);
                showMessage('网络错误，请检查连接后重试', 'error');
            } finally {
                submitBtn.classList.remove('loading');
                submitBtn.textContent = '更新状态';
            }
        });

        // 加载物流信息列表
        async function loadShipments() {
            try {
                // 这里可以根据需要实现加载物流信息的功能
                // 目前暂时显示示例数据
                const tableBody = document.getElementById('shipmentTableBody');
                tableBody.innerHTML = `
                    <tr>
                        <td>1</td>
                        <td>1001</td>
                        <td>北京</td>
                        <td>上海</td>
                        <td><span class="status in-transit">运输中</span></td>
                        <td>
                            <div class="action-buttons">
                                <button class="action-btn view-btn" onclick="viewShipment(1)">查看</button>
                                <button class="action-btn update-btn" onclick="openUpdateModal(1)">更新状态</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>1002</td>
                        <td>广州</td>
                        <td>深圳</td>
                        <td><span class="status delivered">已送达</span></td>
                        <td>
                            <div class="action-buttons">
                                <button class="action-btn view-btn" onclick="viewShipment(2)">查看</button>
                                <button class="action-btn update-btn" onclick="openUpdateModal(2)">更新状态</button>
                            </div>
                        </td>
                    </tr>
                `;
            } catch (error) {
                console.error('加载物流信息错误:', error);
                showMessage('加载物流信息失败', 'error');
            }
        }

        // 查看物流信息
        async function viewShipment(id) {
            try {
                const response = await fetch('http://172.21.136.104:8080/shipment/get', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        id: id
                    })
                });

                const result = await response.json();

                if (result.code === '0') {
                    const shipment = result.data;
                    alert(`物流信息：\nID: ${shipment.id}\n承运商: ${shipment.carrier}\n出发地: ${shipment.from}\n目的地: ${shipment.to}\n状态: ${shipment.status}`);
                } else {
                    showMessage(result.message || '获取物流信息失败', 'error');
                }
            } catch (error) {
                console.error('查看物流信息错误:', error);
                showMessage('网络错误，请检查连接后重试', 'error');
            }
        }

        // 打开更新状态对话框
        function openUpdateModal(shipmentId) {
            document.getElementById('updateShipmentId').value = shipmentId;
            document.getElementById('newStatus').value = 'pending';
        }

        // 退出登录
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                window.location.href = 'Carrier.html';
            }
        }

        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>